<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.home {
		width: 100%;
		background-color: #F6F6F6;
		min-height: 100%;
		font-size: 1.2rem;
		box-sizing: border-box;
		position: relative;
		flex:1;
		overflow: hidden;
		$radiusSize: 100%;
		display: flex;
		flex-direction: column;
		.top_bg{
			width: 140%;
			height: 14rem;
			border-bottom-left-radius: $radiusSize;
			border-bottom-right-radius: $radiusSize;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: $mainColor;
			z-index: 1;
		}
		.wp{
			flex: 1;
				width: 100%;
				z-index: 99;
				display: flex;
				flex-direction: column;
			.user {
				padding: 2rem 1.6rem 0 1.6rem;
				width: 100%;
				box-sizing: border-box;
				height: 5.2rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.info {
					display: flex;
					align-items: center;
					.infonr{
						display: flex;
						flex-direction: column;
						margin-left: 1rem;
						font-size: 1.3rem;
						color: white;
						line-height: 1.8rem;
					}
				}
			}
			.menuContainer {
				box-sizing: border-box;
				padding: 0rem 1.2rem;
				background-color: white;
				margin: 2rem 1.6rem 0 1.6rem;
				box-sizing: border-box;
				border-radius: 0.8rem;
				.line {
					padding: 1.2rem 0rem;
					border: 1px solid #f7f7f7;
					.file{text-decoration: underline;}
					// width: 10.6rem;
					.label{
						font-size: 1.4rem;
						color:$color1;
						width: 75px;
						display: inline-block;
					}
					.desc{
						color: $color3;
						font-size: 1.2rem;
						.green{
							color:#16D17B;
						}
						.blue{
							color:#4970FD;
						}
					}
					.title{
						// font-weight: bold;
						font-size: 1.5rem;
					}
				}
				.content{
					padding: 1.6rem 0rem;
				}
			}
		}
	}
	.fix-bottom{
	  box-sizing: border-box;
	  background: white;
	  text-align: center;
	  border-top: 1px solid #f4f4f4;
	  padding: 0.5rem 1.6rem;
	  .submitBtn{
		  width: 70%;
		  background-color:$mainColor;
		  color:white;
		  margin: 0.2rem auto;
		  font-size: 1.4rem;
		  
	  }
	}
	.van-step__title--active .h3Font, 
	.van-step__title--active .stepHeader, 
	.van-step__title--active .stepFooter{
		color: #FC611E !important;
	}

</style>
<template>
	<div class="home">
		<div class="top_bg"></div>
		<van-action-sheet v-model="show" :actions="actions" @select="onSelect"/>
		<div class="wp">
			<div class="menuContainer">
				<div class="line">
					<span class="label">任务名称</span>
					<span class="desc">{{taskDetail.taskname}}</span>
				</div>
				<div class="line">
					<span class="label">任务状态</span>
					<span class="desc"><i class="blue" v-if="taskDetail.status==1">处理中</i><i class="green" v-if="taskDetail.status==2">已完成</i></span>
				</div>
				<div class="line">
					<span class="label">截止时间</span>
					<span class="desc">{{$utils.parseToDateYMD(taskDetail.endtime)}}</span>
				</div>
				<div class="line">
					<span class="label">紧急程度</span>
					<span class="desc">{{taskDetail.degreename}}</span>
				</div>
			</div>
			<div class="menuContainer">
				<div class="line">
					<span class="label title">任务描述</span>
				</div>
				<div class="content" v-html="taskDetail.content">
					
				</div>
			</div>
			<div class="menuContainer">
				<div class="line">
					<a class="file" :href="taskDetail.file">查看附件</a>
				</div>
			</div>
			<div class="tabbar-height"></div>
		</div>
		<div class="fix-bottom">
			<van-button round block class="submitBtn" :loading="loading" @click="tasksUpdatetask">完成</van-button>
		</div>
	</div>
</template>

<script>
import {Dialog} from 'vant'
import {myMixins} from "@/assets/js/mixins.js"
export default {
	mixins: [myMixins],
	name: "home",
	components: {
	},
	data() {
		return {
			dot: true,
			show: false,
			actions: [{ name: '全部' }, { name: '本星期' }, { name: '本月度' }, { name: '本季度' }, { name: '本年度'} ],
			active: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/af80e9c4-5cba-467f-bd56-078906c4c94a.svg',
			inactive: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/aa629246-a1d4-4e0e-892d-be645bacf2f9.svg',
			infoList: [],
			userInfo:'',
			taskDetail:'',
			loading:false
		}
	},
	created() {
		const userInfo = JSON.parse(localStorage.getItem('userInfo'))
		console.log('userInfo',userInfo)
		this.userInfo = userInfo
		this.taskDetail = this.$store.state.taskItem
		console.log('taskDetail',this.taskDetail)
		if(!this.taskDetail){
			this.$router.replace('/home')
		}
	},
	mounted() {
	},
	methods: {
		onSelect(item) {
		  // 默认情况下点击选项时不会自动收起
		  // 可以通过 close-on-click-action 属性开启自动收起
		  this.show = false;
		  console.log(item.name)
		},
		tasksUpdatetask() {
			let params = {
				// avatar: this.form.avatar,
				// nickname: this.form.nickname,
				campus_id: this.taskDetail.campus_id,
				status: this.taskDetail.status,
				task_id:this.taskDetail.task_id
			}
			console.log("params",params)
			this.loading = true
			this.$request.TasksUpdatetask(params).then(res=>{
				// Dialog({ message: '提示' });
				if(res.ret==200){
					Dialog.alert({
					  title: '系统提示',
					  message: '已完成',
					}).then(() => {
					  // on close
					  this.$router.replace('/home')
					});
				}
			}).finally(()=>{
				this.loading = false
			})
		}
	}
};
</script>
